<template>
  <view class="videoList">
    <view class="swiper-box">
      <swiper :vertical="true" class="swiper" @touchstart="touchs" @touchend="touche" @change="changeV" >
        <swiper-item v-for="(item,index) in list" :key="index">
          <view class="swiper-item"> 
          <video-play :video="item" ref="playerr" :index="index"></video-play>
          </view>
          <view class="left-box">
            <video-text :item="item"></video-text>
          </view>
          <view class="right-box">
            <listRight></listRight>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  import videoPlay from "../videoPlay/videoPlay.vue"
  import videoText from '../videoText/videoText.vue'
  import listRight from '../listRight/listRight.vue'
  var timer =null
  export default {
    name:"video-Nav",
    components:{
      videoPlay,
      videoText,
      listRight
    },
    data() {
      return {
        list:[
          {
            id:1,
            src:"http://powernod.com/u/data/urls/11284280/392b5a29b6be861701a0cbbe82f9eb84_1665061157.mp4",
            author:"@时间胶囊",
            title:"“这个假期有没有见到你想见的人呢，告诉ta降温了 要照顾好自己”"
            
          },
          {
            id:2,
            src:"http://powernod.com/u/data/urls/39841151800/cd5fbb257aef4f0156d58d6615f48094_1665061280.mp4",
            author:"@小小画紧野",
            title:"妈妈 下次别让爸接我放学了"
            
          },  {
            id:3,
            src:"http://powernod.com/u/data/urls/12261332490/QQ%E8%A7%86%E9%A2%9120221006200213.mp4",
            author:"@初见端倪",
            title:"胸中一点浩然气，何处不是倒悬山。我剑来书友登山，怎能不人手一根行山杖"
          },
          {
            id:4,
            src:"http://powernod.com/u/data/urls/12261332491/2.mp4",
            author:"@live",
            title:"不曾去过倒悬山 "
          }, {
            id:5,
            src:"http://powernod.com/u/data/urls/112843760/e07a2183000c3239192353e177649d3a_1665061224.mp4",
            author:"@赵文卓",
            title:"普及一下：这是双手剑，不是刀"
          }, {
            id:6,
            src:"http://powernod.com/u/data/urls/112224672040/539e9fffc50519c6ee734e516f949b4d_1665061452.mp4",
            author:"@齐鲁晚报",
            title:"2022年10月5日，海拔2000多米的老君山迎来河南第一场雪。"
          },
          {
            id:7,
            src:"http://powernod.com/u/data/urls/1128431110/396d3ebc730c6ef3e02af296f201b552_1665061193.mp4",
            author:"@时间胶囊",
            title:"“青春的主角已经在更替了” #青春 "
          },
        ],
        videos:[],
        pageStartY:0,
        pageEndY:0,
        page:0
      };
    },
    onLoad(){
      this.list
    },
    methods:{
      changeV(res){
        clearTimeout(timer)
        this.page = res.detail.current
        timer = setTimeout(()=>{
          if(this.pageStartY>this.pageEndY){
           this.$refs.playerr[this.page].player();
           this.$refs.playerr[this.page-1].pause();
            this.pageStartY=0
            this.pageEndY=0
          }
          else{
        this.$refs.playerr[this.page].player();
        this.$refs.playerr[this.page+1].pause();
            this.pageStartY=0
            this.pageEndY=0
          }
        },1)
       
      },
      touchs(res){
        this.pageStartY = res.changedTouches[0].pageY
        
      },
      touche(res){
        this.pageEndY = res.changedTouches[0].pageY
      }
    }
  }
</script>
<style>
.videoList{
  width:100%;
  height:100vh;
}
.swiper-box{
  width:100%;
  height:100%;
}
.swiper{
  width:100%;
  height:100%;
}
.swiper-item{
  width:100%;
  height:100%;
  z-index:19;
}
.left-box{
  position:absolute;
  bottom: 50px;
  left:10px;
  z-index: 20;
}
.right-box{
  position:absolute;
  bottom: 50px;
  right: 10px;
  z-index: 20;
}
</style>